<template>
    <div class="sidebar">
        <template v-for="(item,index) in $router.options.routes"  v-if='!item.hidden && $route.matched.length &&$route.matched[0].path===item.path'>
               <el-menu class="el-menu-vertical" :default-active="$route.path" unique-opened router >
                   <template v-for="menu in item.children">
                        <template v-if="menu.children ">
                            <el-submenu :index="menu.path" v-if="showMenu(item.path+'/'+menu.path)">
                                <template slot="title"><i :class="'fa fa-'+menu.icon"></i> {{ menu.name }}</template>
                                <el-menu-item v-for="(subItem,i) in menu.children" :key="i" :index="item.path+'/'+menu.path+'/'+subItem.path" v-if="showMenu(item.path+'/'+menu.path+'/'+subItem.path)">{{ subItem.name }}
                                </el-menu-item>
                            </el-submenu>
                        </template>
                        <template v-else>
                            <el-menu-item :index="item.path+'/'+menu.path" v-if="!menu.hidden">
                                <i :class="'fa fa-'+menu.icon"></i> {{ menu.name+item.hidden }}
                            </el-menu-item>
                        </template>
                    </template>  
             </el-menu>
        </template>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                 menu_list: []
            }
        },
        computed:{
            onRoutes(){
                return this.$route.path.replace('/','');
            }
        },
        methods:{
            updateCurMenu(route) {
                var route = route || this.$route;
                if (route.matched.length) {
                    var rootPath = route.matched[0].path,
                        fullPath = route.path;
                    this.$store.dispatch('set_current_route', {
                        rootPath,
                        fullPath
                    });
                } else {
                    this.$router.push('/404');
                }
            },
            showMenu(path)
            {
                return this.$store.state.user.userInfo.web_routes.find(o=>o.startsWith(path))
            }
        },
        created() {
            this.updateCurMenu();
        },
        mounted() {
            // console.log(this.$store.state.user.userinfo.access);
        },
        watch: {
            $route(to, from) {
                this.updateCurMenu(to);
            }
        }
    }
</script>

<style>
    .sidebar{
        display: block;
        position: absolute;
        width: 200px;
        left: 0;
        top: 60px;
        bottom:0;
        background: #fff;
    }
    .sidebar > ul {
        height:100%;
    }
   
</style>
